<template>
  <div class="container">
    <div class="xqct">
      <section class="xqct1" >
        <div class="ct">
          <p class="dyh">
            <span>当前位置</span> : <a href="/">首页</a> > <span>{{title.xqdata.twoServiceRes.servicename}}</span>
           <div>
               <img class="czt_banner" src="~/assets/img/jzgsydjjba_banner.jpg">
            </div>
       		</p>
          <!-- 建筑工程设计资质类型 -->

            <div class="czt ct2 af">
                    <div class="left">
                      <h4>{{title.xqdata.twoServiceRes.servicename}}</h4>
                      <p class="jg">价  格: <span>{{price}}{{price?'':'暂无报价'}}</span></p>
                      <div class="lx af"><span>产   品：</span><div><a href="javascript:;" class="select">{{title.xqdata.twoServiceRes.servicename}}</a></div></div>
                      <!-- 地区 -->
                      <div class="dq af"><span>地   区：</span>
                        <div class="div2" >
                          <div class="xz1" :class="kzdq1"><p class="dz" @click="kzdqfc">{{shengname}}{{seleshiname?'-'+seleshiname:''}}<span class="sj"></span></p>
                            <div class="hover" :class="kzdq1" @click="kzdqfc3">
                              <ul class="af wb">
                                <li class="li1 li xs select" @click="djsheng()">{{shengname}}
                                  <ul class="nrul af select nrul1">
                                    <!-- <li class="cli1 shil" v-for="(citydt,id) in this.citys" :key="id" @click="djcitys(citydt.province,id,citydt.provincename)" :class="[id==0?'select':'','shil'+id]" >{{citydt.provincename}}</li> -->
                                  </ul>
                                </li>
                                <li class="li2 li xs" @click="djcitys2(2)">{{shiname}}
                                  <ul class="nrul af nrul2">
                                    <li class="l1 xian" v-for="(dat,id2) in this.xianqu"  :class="'xian'+id2"  @click="djcitys3(dat.city,id2,dat.cityname)">{{dat.cityname}}</li>
                                  </ul>
                                </li>
                                <li class="li3 li">{{xianname}}
                                  <ul class="nrul af nrul3">
                                  </ul>
                                </li>
                              </ul>
                            </div>
                          </div>
                          <!-- 地区 -->
                          <p class="bh">信息保护中，请放心填写</p>
                        </div>
                      </div>

                    </div>
                    <div class="right">
                      <h4>免费回电</h4>
                      <!-- {{this.$route.query.name}} -->
                      <!-- {{this.$route.params.id}} -->
                      <p class="p1">
                        <input placeholder="您的名字" id="name" v-model="username" type="text"/>

                      </p>
                      <p class="p2">
                        <input placeholder="电话" id="iphone" v-model="telphone" type="text"/>
                      </p>
                      <p class="xqms" style="font-size: 16px; width: 260px;margin: 10px auto; border: 1px solid #eee">
                        <textarea style="border: none;
            background: none;
            display: block;
            width: 240px;
            text-indent: 10px;
            padding: 10px 10px;
            height: 20px;
            resize: none;
            overflow: hidden;" placeholder="详情描述:" v-model="xiangqingms"></textarea>
                      </p>
                      <a href="javascript:;" @click="tjbd()">立即提交</a>
                    </div>
                  </div>

          <!-- 建筑工程设计资质类型 -->
        </div>
      </section>
      <section class="fwjy">
        <h4>服务精英推荐</h4>
        <div v-swiper:mySwiper="swiperOption" style="height: 160px">
        <ul class="gjs swiper-wrapper" style="height: 200px">
          <li class="af swiper-slide"  v-for="(gj,id) in title.gj" :key="id" :class="id>4?[gj2,'li2']:[gj1,'li1']"><img :src="'https://exam.zhonghaiqihang.com/'+gj.servicedetailsavatar" width="86px" height="86px">
            <div class="rt">
              <h5>{{gj.username}}</h5>
              <p>电话: {{gj.mobile}}</p>
              <a :href="gj.cclink" target="_blank">立即咨询</a>
            </div>
          </li>
        </ul>
        </div>
        <div class="qhgj" :style="title.gj.length<=5?'display:none':''"><a href="javascript:;" class="a1 select" @click="mySwiper.slidePrev(200,xqbg('a1'))"></a><a href="javascript:;" class="a2"  @click="mySwiper.slideNext(200,xqbg('a2'))"></a></div>
      </section>
      <section class="cont" style="display: flex; justify-content: space-between;">
        <div class="left" style="padding-bottom: 50px;">
          <div class="topnav"><a href="" class="select">服务介绍</a></div>
          <img style="margin: 38px auto 0 auto;display: block;" src="~/assets/img/jzgsydjjba_fwjs.png" alt="">
        </div>
          <!-- 热门服务 -->
            <JZGSRMFW></JZGSRMFW>
          <!-- 热门服务 -->
      </section>
      <section class="sc zssc7 rssb7">
        <div class="ct">
          <ul class="af">
            <li class="li1"><img src="~/assets/img/zssc71.png" width="87" height="87">
              <div>
                <h4>快速响应</h4>
                <p>第一时间响应您的需求</p>
              </div>
            </li>
            <li class="li1"><img src="~/assets/img/zssc72.png" width="87" height="87">
              <div>
                <h4>信息安全</h4>
                <p>保护客户信息安全</p>
              </div>
            </li>
            <li class="li1"><img src="~/assets/img/zssc73.png" width="87" height="87">
              <div>
                <h4>进度掌握</h4>
                <p>服务全程进行跟进 </p>
              </div>
            </li>
            <li class="li1"><img src="~/assets/img/zssc74.png" width="87" height="87">
              <div>
                <h4>专属服务</h4>
                <p>专业顾问全程一对一<br/>服务</p>
              </div>
            </li>
            <li class="li6 last"><img src="~/assets/img/zssc75.png" width="87" height="87">
              <div>
                <h4>提供售后</h4>
                <p>服务问题及时解决并<br/>反馈</p>
              </div>
            </li>
          </ul>
        </div>
      </section>
    </div>
    <my-ft></my-ft>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  import JZGSRMFW from '~/components/jzgsrmfw.vue'
  export default {
    name: 'HelloWorld',
    data () {
      return {
        ywid:'',
        price:'',
        gj1:'select',
        gj2:'',
        xianname:'',
        username:'',
        telphone:'',
        kzdq:'',
        kzdq:'',
        kzwy:'',
        kzdq1:'',
        shengname:'',
        province:'',
        citys:[],
        shiname:'',
        xianqu:[],
        seleshiname:'',
        xiangqingms:'',
        swiperOption: {
          loop: true,
          slidesPerView: 5,
          centeredSlides: true,
          autoplay:{
            delay:5000,
            disableOnInteraction:false,
            spaceBetween:5000,
            loop:true,
          },
          pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true
          },
          on: {
            slideChange() {
            },
            tap() {
            }
          }
        },
        gjname:['工商服务顾问','财税记账顾问','商标知产顾问','社保人事顾问','社保人事顾问','资质商城顾问','工商服务顾问','工商服务顾问','财税记账顾问','财税记账顾问'],
      }
    },
    async asyncData ({ params }) {

    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Service/serviceDetailsData`,{
      params:{
        serviceid:336
      }});
    let nh4 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`,{
      params:{
        serviceid:params.id
      }});
    let nh5 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Service/popularData`);

    let nh6 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/QybDetailImg/getQybDetailImg`,{
      params:{
        threeid:params.id,
//      twoid:this.$route.query.name
      }});

    let data  = {nav:nh.data,xqdata:nh3.data,gj:nh4.data,rmfw:nh5.data,imgurl:nh6.data};
    return { title: data,xqdata:nh3.data}
  },
  components:{
    JZGSRMFW
  },
  mounted:function(){
	console.log(this.title)
      var _this = this;

      //标题banner

        _this.$axios.get('api/PInterface/QybDetailImg/getQybDetailImg',{
          params:{
            threeid:_this.$route.params.id,
            twoid:_this.$route.query.name,
            type:1,
          }
        })
          .then(function(response){
          	_this.cbanner = response.data
          });

      //标题banner
      this.shengname = this.title.xqdata.defaultRes.provincename;
      this.seleshiname = this.title.xqdata.defaultRes.cityname;
      this.seleshicity = this.title.xqdata.defaultRes.city;
      this.shiname = this.title.xqdata.defaultRes.cityname;
      this.xianqu = this.title.xqdata.cityRes;
      this.shiid = this.title.xqdata.defaultRes.city;
      this.province = this.title.xqdata.defaultRes.province;
      $(document).ready(function(){
        $('.xqct a.li1').addClass('select');
        $('.xqct .xqct1 .left .dq div .xz1:before').click(function(){
          if(this.kzdq==0){
            this.kzdq1='select';
            this.kzdq=1;
            this.kzwy = 1;
            event.stopPropagation();
          }else if(this.kzdq==1){
            this.kzdq1='';
            this.kzdq = 0;
            event.stopPropagation();
          }
          event.stopPropagation();
        });
        $('.xqct .sk1.sk.sk11').addClass('select');
        $('.xqct a.li1').hover(function(){
          $('.xqct a.li1').addClass('select');
          $('.xqct a.li2').removeClass('select');
          $('.xqct .sk1.sk.sk11').addClass('select');
          $('.xqct .sk1.sk.sk12').removeClass('select');
        });

        $('.xqzjdl2 ul.nav li').hover(function(){
          $('.xqzjdl2 ul.nav li').removeClass('select');
          $(this).addClass('select');
        });

        $('.xqzjdl2 ul.nav .li1').hover(function(){
          $('.list').removeClass('select');
          $('.nr .list1').addClass('select');
        });
        $('.xqzjdl2 ul.nav .li2').hover(function(){
          $('.list').removeClass('select');
          $('.nr .list2').addClass('select');
        });
        $('.xqzjdl2 ul.nav .li3').hover(function(){
          $('.list').removeClass('select');
          $('.nr .list3').addClass('select');
        });

      })

  },
  computed: {

  },
    head() {
    	return {
    		title: '北京异地进京备案_企业邦',
    		meta: [{
    				hid: 'description',
    				name: 'description',
    				content: '北京异地进京备案_企业邦'
    			},
    			{
    				hid: 'keywords',
    				name: 'keywords',
    				content: '北京异地进京备案_企业邦'
    			}
    		]
    	}
    },
    methods:{
      djsheng:function(){
        $('.nrul').removeClass('select');
        $('.nrul1').addClass('select');
        $('.xqct1 .div2 ul.wb .li').removeClass('select');
        $('.xqct1 .div2 ul.wb .li1').addClass('select');

      },
      kzdqfc:function(e){
          if(this.kzdq==0){
            this.kzdq1='select';
            this.kzdq=1;
            this.kzwy = 1;

            event.stopPropagation();
          }else if(this.kzdq==1){
            this.kzdq1='';
            this.kzdq = 0;
            event.stopPropagation();
          }
          event.stopPropagation();
        },

        kzdqfc3:function(e){
            this.kzdq1='select';
            this.kzdq=1;
            this.kzwy = 1;
            event.stopPropagation();
        },
     djcitys:function(e,e2,e3){
       var _this = this;
       let id = _this.ywid;
       let url = 'serviceid='+id+'&province='+this.province;

       $('.shil').removeClass('select');
       $('.shil'+e2).addClass('select');
       this.shengname = e3;

       _this.$axios.post('api/PInterface/Service/getCityData','serviceid='+336+'&province='+e
       )
         .then(function(response){
           _this.xianqu = response.data;
         });
     },
     djcitys2:function(e){
       var _this = this;
       $('.nrul').removeClass('select');
       $('.nrul2').addClass('select');
       $('.xqct1 .div2 ul.wb .li').removeClass('select');
       $('.xqct1 .div2 ul.wb .li2').addClass('select');
       let id = this.ywid;
       _this.$axios.post('api/PInterface/Service/getCityData','serviceid='+336+'&province='+_this.province
       )
         .then(function(response){
           _this.xianqu = response.data;
           // _this.price = response.data.
           for(let i = 0; i<response.data.length;i++){
             if(_this.diyici==0&&_this.seleshicity==response.data[i].city){
               _this.price = response.data[0].price;
               $('.xian'+i).addClass('select');
               _this.diyici=1;
             }
             if(response.data[i].city == e){
               _this.price = response.data[i].price;
               _this.shiname = response.data[i].cityname;
               _this.shiid = resonse.data[i].city;
             }
           }
         });


     },
     djcitys3:function(e,e2,e3){
       $('.xian').removeClass('select');
       $('.xian'+e2).addClass('select');
       let id = this.ywid;
       var  _this = this;
       for(let i = 0; i<this.xianqu.length;i++){
         if(this.xianqu[i].city == e){
           _this.price = this.xianqu[i].price;
           this.xianid = i;
           this.shiname = this.xianqu[i].cityname;
           this.seleshiname = this.xianqu[i].cityname;

         }
       }
       this.shiname = e3;
       _this.$axios.post('api/PInterface/Service/getAreaData','serviceid='+336+'&city='+e
       )
         .then(function(response){

         });
     },
     tjbd:function(e){
         if(this.username =='' || this.telphone == ''){
           alert('信息填写不完整');
           return false;
         }
         //
         var regex= /^1[3|4|5|6|7|8|9][0-9]{9}$/;
         if(!regex.exec(this.telphone)){
           alert('手机号码格式错误');
           return false;
         }
         var _this = this;
         var sj;
         if(this.$route.query.name){
           sj = 'username='+this.username+'&telphone='+this.telphone+'&content='+this.xiangqingms+'&serviceid='+this.$route.query.name
         }else{
           sj = 'username='+this.username+'&telphone='+this.telphone+'&content='+this.xiangqingms+'&serviceid='+'';
         }
         _this.$axios.post('/api'+'/PInterface/Form/formSubmitInterface',sj)
           .then(function(response){

             if(response.data == 'execute_success'){
               _this.tcmsg = '提交成功,稍后会有人员与你联系';
               $('.bdtjtc').addClass('select');
               $('.bdtjtc').fadeIn(0);
               $('.bdtjtc').fadeOut(2500);
               _this.username = '';
               _this.telphone = '';
               _this.xiangqingms = '';
             } else if(response.data == 'telphone_is_null'){
               _this.tcmsg = '电话是空值';
               $('.bdtjtc').addClass('select');
               $('.bdtjtc').fadeIn(0);
               $('.bdtjtc').fadeOut(2500);
             }else if(response.data == 'serviceid_error'){
               _this.tcmsg = '业务id错误';
               $('.bdtjtc').addClass('select');
               $('.bdtjtc').fadeIn(0);
               $('.bdtjtc').fadeOut(2500);
             }else if(response.data == 'telphone_type_error'){
               _this.tcmsg = '电话类型错误';
               $('.bdtjtc').addClass('select');
               $('.bdtjtc').fadeIn(0);
               $('.bdtjtc').fadeOut(2500);
             }else if(response.data == 'execute_error'){
               _this.tcmsg = '执行错误';
               $('.bdtjtc').addClass('select');
               $('.bdtjtc').fadeIn(0);
               $('.bdtjtc').fadeOut(2500);
             }
           });
       },
    xqbg:function(e){
      $('.qhgj a').removeClass('select');
      $('.qhgj .'+e).addClass('select');
    },
    }
  }
</script>

<style>
.list{
  display: none;
}
.nr .list1{
  padding: 0 40px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.nr .list3{
  padding: 0 40px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.nr .list2{
  padding: 0 40px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.nr .list2 li{
   width: 50%;
   margin-bottom: 0px;
}
.nr .list3 li{
  width: 30%;
}
.list li::before{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #FF791F;
  border-radius: 50%;
  margin-right: 10px;
}
.list li{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #555555;
  width: 33%;
  margin-bottom: 10px;
}
.nr .select{
  display: flex;
}
</style>
